@charset "UTF-8";
/* Body */
body {
	font-family: source-sans-pro;
	background-color: #f2f2f2;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	font-style: normal;
	font-weight: 200;
}
/* Container */
.container {
	width: 90%;
	margin-left: auto;
	margin-right: auto;
	height: 2000px;
	background-color: #FFFFFF;
}
/* Navigation */
header {
	width: 100%;
	height: 50px;
	background-color: #52bad5;
	border-bottom: 1px solid #2C9AB7;
}
.logo {
	color: #ffffff;
	font-weight: bold;

	width: 60%;
	float: left;
	margin-top: 15px;
	margin-left: 25px;
	letter-spacing: 4px;
}


/*note head Section */
.section_note_head {
	background-color: orange;
    width: 100%;
	padding-top: 10px;
	padding-bottom: 10px;
}

.note_h2 {
	color: #FFFFFF;
	text-align: center;
	letter-spacing: 4px;
    /*background-color: #333333;*/
}

/* ball*/
.article_red_ball {
    width: 100%;
	height: 100%;

	padding-top: 10px;
	padding-bottom: 10px;
    padding-left: 10px;
    padding-right: 10px;

}

.article_red_dan_ball {
    width: 100%;
	height: 100%;

	padding-top: 10px;
	padding-bottom: 10px;
    padding-left: 10px;
    padding-right: 10px;

}

.article_red_tuo_ball {
    width: 100%;
	height: 100%;

	padding-top: 10px;
	padding-bottom: 10px;
    padding-left: 10px;
    padding-right: 10px;

}

.aside_blue_ball {
    width: 100%;
	height: 100%;

	padding-top: 10px;
	padding-bottom: 10px;
    padding-left: 10px;
    padding-right: 10px;


}

.aside_blue_dan_ball{
	    width: 100%;
	height: 100%;

	padding-top: 10px;
	padding-bottom: 10px;
    padding-left: 10px;
    padding-right: 10px;

}

.aside_blue_tuo_ball{
	    width: 100%;
	height: 100%;

	padding-top: 10px;
	padding-bottom: 10px;
    padding-left: 10px;
    padding-right: 10px;

}
.footer_select_btn{

	float: bottom;
}

/*span_ball*/
span.btn_ball {
    display: inline-block;
    width: 30px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    border-radius: 50%;
    background: -moz-radial-gradient(10px 10px, #eee, #333);
    background: -webkit-radial-gradient(10px 10px, #eee, #333);
    cursor: pointer;
    margin: 10px 0 0 0;
}

span.red {
    background: -moz-radial-gradient(10px 10px, red, #333);
    background: -webkit-radial-gradient(10px 10px, red, #333);
    color: #fff;
    font-weight: bold;
}

span.blue {
    background: -moz-radial-gradient(10px 10px, blue, #333);
    background: -webkit-radial-gradient(10px 10px, blue, #333);
    color: #fff;
    font-weight: bold;
}


/*button*/
.btn {

	float: top;
	font-weight: bold;
	width: 80px;
	height: 40px;
	border-radius: 3px;
	border: 1px solid #c0c0c0;

	color: #8c3e4a;
	border-color: #ed7989;
	display: inline-block;
	box-shadow: inset 0 1px 0 #f9a1b1, 0 1px 0 rgba(0,0,0,.2);
	background: -webkit-linear-gradient(top, #f78297, #f56c7e);
	background: -moz-linear-gradient(top, #f78297, #f56c7e);
	background: -o-linear-gradient(top, #f78297, #f56c7e);
	background: -ms-linear-gradient(top, #f78297, #f56c7e);
	background: linear-gradient(top, #f78297, #f56c7e);
}
.btn:hover {
	background: -webkit-linear-gradient(top, #fbacbb, #f4798f);
	background: -moz-linear-gradient(top, #fbacbb, #f4798f);
	background: -o-linear-gradient(top, #fbacbb, #f4798f);
	background: -ms-linear-gradient(top, #fbacbb, #f4798f);
	background: linear-gradient(top, #fbacbb, #f4798f);
}
.btn:active {
	top: 4px;
	box-shadow: inset 0 1px 3px #aa2c3d;
	background: -webkit-linear-gradient(top, #e15c6d, #e15c6d);
	background: -moz-linear-gradient(top, #e15c6d, #e15c6d);
	background: -o-linear-gradient(top, #e15c6d, #e15c6d);
	background: -ms-linear-gradient(top, #e15c6d, #e15c6d);
	background: linear-gradient(top, #e15c6d, #e15c6d);
}